<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<style type="text/css">
			body{
				background-color: #fff;
			}
			.mui-bar {
				background-color: #f6661f;
				height: auto;
			}
			.mui-input-group:before {
				background-color: #fff;
			}
			.mui-input-group:after {
				background-color: #fff;
			}
			.mui-input-row {
				position: relative;
				padding: 10px 15px;
			}
			.mui-btn-block {
				padding: 10px 0;
			}
			.mui-input-group .mui-button-row {
				/*height: 30px;*/
				
				position: relative;
				padding: 10px 30px;
			}
			.mui-input-group .mui-input-row:after {
				left: 30px;
				right: 30px;
			}
			.mui-input-group .mui-input-row:before {
				left: 30px;
				right: 30px;
			}
			.forgot {
				margin-top: 45px;
			}
			a {
				color: #30a4ed;
			}
			.mui-content {
				background-color: #fff;
			}
			input[type="password"] {
				border: none;
			}
			.mui-btn-negative {
				background-color: #30a4ed;
				border: 1px solid #30a4ed;
				border-radius: 0px;
			}
			#avatar{
				padding-top: 60px;
				padding-bottom: 60px;
				width: 100%;
			}
			#avatarimg{
				width: 160px;
				margin: 0px auto;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="avatar">
				<div id="avatarimg"><img style="width: 160px;border-radius: 160px;" src="../image/icon.png"/></div>
			</div>
			<div class="mui-input-group" id="loginform">
				<div class="mui-input-row">
					<input type="text" class="mui-input-clear" id="username" autofocus="autofocus" placeholder="帐号ID/邮箱">
				</div>
				<p> </p>
				<div class="mui-input-row">
					<input type="password" id="password" class="mui-input-clear" placeholder="密码">
				</div>
				<br/>
				<div class="mui-button-row">
					<button class="mui-btn mui-btn-negative mui-btn-block" id="login">登录</button>
				</div>

				<div class="forgot">
					
					<p class="mui-text-center">还没有帐号?<a id="signin">立即注册</a>
					</p>
					<p class="mui-text-center"><a id="forget">忘记密码?</a>
					</p>
				</div>
			</div>
		</div>
		<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../script/api.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../script/md5.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			apiready = function() {
				var header = $api.byId('header');
				$api.fixStatusBar(header);
				document.getElementById("login").addEventListener("tap", function() {
					var myusername = username.value;
					//					alert(myusername);
					localStorage.setItem("username", myusername);
					var mypassword = document.getElementById("password").value;
					if (myusername === "" || myusername === undefined || myusername === null) {
						api.toast({
							msg: '帐号不能为空哦！',
							location: 'middle'
						});
						document.getElementById("username").setAttribute("autofocus", "autofocus");
						return false;
					}
					if (mypassword === "" || mypassword === undefined || mypassword === null) {
						api.toast({
							msg: '密码不能为空哦！',
							location: 'middle'
						});
						return false;
					}
					api.showProgress({
						style: 'default',
						animationType: 'fade',
						text: '正在登录中…',
						modal: false
					});
					var url = MYAPP.webroot + "/api/index.php/Home/User/login/";
					var success = function(ret) {
						if (ret.code == "200") {
							if (ret.error) {
								api.toast({
									msg: ret.error,
									location: 'middle',
									duration: 1000
								});
							} else if (ret.key) {
								api.toast({
									msg: '登录成功！',
									location: 'middle',
									duration: 1000
								});
								localStorage.setItem('key', ret.key);
								localStorage.setItem('username', ret.uid);
								api.sendEvent({
								    name: 'loginsuccess'
								});
								setTimeout('api.closeWin()', 1000);
							} else {
								api.toast({
									msg: '未知错误请，请重试！',
									location: 'middle',
									duration: 1000
								});
							}
						}
						api.hideProgress();
					};
					var data = {
						"username": myusername,
						"password": mypassword,
						"client": "android"
					};
					api.ajax({
						url: url,
						method: 'post',
						timeout: 30,
						dataType: 'json',
						returnAll: false,
						data: {
							values: data
						}
					}, function(ret, err) {
						if (ret) {
							success(ret);
						} else {
							api.toast({
								msg: '错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode,
								location: 'middle',
								duration: 1000
							});
						}
					});
				});
				document.getElementById("signin").addEventListener('tap', function() {
					api.openWin({
						name: 'signin',
						url: 'signin.html',
						animation: {
							type: 'movein',
							subtyoe: 'from_left',
							duration: 300
						}
					});
				});
				document.getElementById("forget").addEventListener('tap', function() {
					api.openWin({
						name: 'forget',
						url: 'forget.html',
						animation: {
							type: 'movein',
							subtyoe: 'from_left',
							duration: 300
						}
					});
				});
			};
		</script>
	</body>

</html>